<div class="gf-form-group">
  <div class="grafana-info-box">
    <h5>Configuring Azure and your Azure Data Explorer Database</h5>
    <h5>1. Create an AAD application</h5>
    <p>Details on how to do create one via the Azure portal or with the Azure CLI can be found <a class="external-link"
        target="_blank" href="https://github.com/grafana/azure-data-explorer-datasource#configuring-the-datasource-in-grafana">here.</a></p>

    <h5>2. Connect the AAD Application to a database user</h5>
    <p>
      Navigate to the Azure Data Explorer Web UI via the Azure Portal.

      The AAD application that you created in step 1 needs to be given viewer access to your Azure Data Explorer database. This is
      done using the dot command <i>add</i>:
      <pre>.add database your_db_name viewers ('aadapp=your_client_id;your_tenant_id')</pre>
    </p>

    <h5>3. Configure the connection in Grafana</h5>
    <p>
      Use the details from the AAD Service Principle from Step 1 to fill in the field below. Then click the Save & Test
      button.
    </p>

    <p>Detailed instructions on all three steps can found in <a class="external-link" target="_blank" href="https://github.com/grafana/azure-data-explorer-datasource#configuring-the-datasource-in-grafana">in
        the documentation.</a></p>
  </div>
</div>

<h3 class="page-heading">Connection details</h3>

<div class="gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Cluster URL</span>
      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.clusterUrl" placeholder="{{ctrl.suggestUrl}}"
        bs-typeahead="getSuggestUrls" min-length="0" ng-pattern="/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/"
        required/>
      <info-popover mode="right-absolute">
        <p>The cluster url for your Azure Data Explorer database.</p>
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Tenant Id</span>
      <input class="gf-form-input width-30" type="text" ng-model='ctrl.current.jsonData.tenantId' placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
      <info-popover mode="right-absolute">
        <p>In the Azure Portal, navigate to Azure Active Directory -> Properties -> Directory ID.</p>
        <a target="_blank" href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal">**Click
          here for detailed instructions on setting up an Azure Active Directory (AD) application.**</a>
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Client Id</span>
      <input class="gf-form-input width-30" type="text" ng-model='ctrl.current.jsonData.clientId' placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
      <info-popover mode="right-absolute">
        <p>In the Azure Portal, navigate to Azure Active Directory -> App Registrations -> Choose your app ->
          Application
          ID.</p>
        <a target="_blank" href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal">**Click
          here for detailed instructions on setting up an Azure Active Directory (AD) application.**</a>
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline" ng-if="!ctrl.current.secureJsonFields.clientSecret">
    <div class="gf-form">
      <span class="gf-form-label width-13">Client Secret</span>
      <input class="gf-form-input width-30" type="text" ng-model='ctrl.current.secureJsonData.clientSecret' placeholder=""></input>
      <info-popover mode="right-absolute">
        <p>To create a new key, log in to Azure Portal, navigate to Azure Active Directory -> App Registrations ->
          Choose
          your app -> Keys.</p>
        <a target="_blank" href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal">**Click
          here for detailed instructions on setting up an Azure Active Directory (AD) application.**</a>
      </info-popover>
    </div>
  </div>
  <div class="gf-form" ng-if="ctrl.current.secureJsonFields.clientSecret">
    <span class="gf-form-label width-13">Client Secret</span>
    <input type="text" class="gf-form-input max-width-13" disabled="disabled" value="configured">
    <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.current.secureJsonFields.clientSecret = false">reset</a>
  </div>
</div>

<h3 class="page-heading">Query Optimizations</h3>
<div class ="gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Query timeout</span>
      <input class="gf-form-input width-9" type="text" spellcheck="false" ng-model='ctrl.current.jsonData.queryTimeout' placeholder="30s" ng-pattern="/(^[1-5][0-9]?[sm]$)|(^60[sm]$)|(^1h$)/"></input>
      <info-popover mode="right-absolute">
        This value controls the client query timeout.
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <gf-form-switch label="Use dynamic caching" checked="ctrl.current.jsonData.dynamicCaching" label-class="width-13">
      </gf-form-switch>
      <info-popover mode="right-normal">
        By enabling this feature Grafana will dynamically apply cache settings on a per query basis and the default cache max age will be ignored.<br /><br />For time series queries we will use the bin size to widen the time range but also as cache max age.
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Cache Max Age</span>
      <input class="gf-form-input width-9" ng-model="ctrl.current.jsonData.cacheMaxAge" ng-disabled="ctrl.current.jsonData.dynamicCaching" spellcheck="false" placeholder="0m" ng-pattern="/^(\d{1,3}(\.\d{0,2})?(d|m|s|h|ms))$/"></input>
      <info-popover mode="right-absolute">
        By default the cache is disabled. If you want to enable the query caching please specify a max timespan for the cache to live.
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Data concistency</span>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input" ng-model="ctrl.current.jsonData.dataConsistency" ng-options="d.value as d.label for d in ctrl.dataConsistency"></select>
      </div>
      <info-popover mode="right-normal">
        By default the data consistency is strong. If you want to query your data with an other cosistency, choose the desired value.
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Default editor mode</span>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input" ng-model="ctrl.current.jsonData.defaultEditorMode" ng-options="mode.value as mode.label for mode in ctrl.editorModes"></select>
      </div>
      <info-popover mode="right-normal">
        The default editor mode is Visual. If you need to change the default editor mode choose the desired value.
      </info-popover>
    </div>
  </div>
</div>

<h3 class="page-heading">Database schema settings
  <a ng-click="ctrl.refreshSchema()" class="btn btn-small">
    <icon ng-if="ctrl.loading" name="'sync'" class="panel-loading__spinner spin-clockwise" style="margin-bottom: 0;"></icon>
    <icon ng-if="!ctrl.loading" name="'sync'" style="margin-bottom: 0;"></icon>
  </a>
</h3>
<div ng-if="ctrl.schemaError" class ="gf-form-group">
  <div class="alert alert-warning">
    <div class="alert-body">
      Could not load database schema, make sure you have correct credentials. Then save the settings and refresh the database schema settings.
    </div>
  </div>
</div>
<div ng-if="!ctrl.schemaError" class ="gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-13">Default Database</span>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input" ng-model="ctrl.current.jsonData.defaultDatabase" ng-options="f.value as f.text for f in ctrl.databases"></select>
      </div>      
      <info-popover mode="right-normal">
        <p>Choose the default/preferred Database for this Azure Data Explorer Cluster.</p>
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <gf-form-switch label="Use managed schema" checked="ctrl.current.jsonData.useSchemaMapping" label-class="width-13">
      </gf-form-switch>
      <info-popover mode="right-normal">
        By enabling this feature you can specify what tables/functions/views that should be available when building queries in the visual query builder.
      </info-popover>
    </div>
  </div>
  <h3 class="page-heading">Database schema settings
    <a ng-click="ctrl.refreshSchema()" class="btn btn-small">
      <icon ng-if="ctrl.loading" name="'sync'" class="panel-loading__spinner spin-clockwise" style="margin-bottom: 0;"></icon>
      <icon ng-if="!ctrl.loading" name="'sync'" style="margin-bottom: 0;"></icon>
    </a>
  </h3>

  <div ng-show="ctrl.current.jsonData.useSchemaMapping">
    <hr />

    <div class="gf-form-inline" style="margin-top: 4px;" ng-repeat="mapping in ctrl.current.jsonData.schemaMappings">
      <div class="gf-form-inline" style="flex-grow: 1;">
        <span>{{ctrl.formatMappingText(mapping)}} -> {{mapping.displayName}}</span>
      </div>

      <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.removeSchemaMapping($index)">X</a>
    </div>

    <div ng-if="ctrl.current.jsonData.schemaMappings.length === 0">
      <span>No mappings added</span>
    </div>

    <hr />

    <div class="gf-form">
      <span class="gf-form-label width-5">Target</span>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input" ng-model="ctrl.mapping" ng-options="m as m.text for m in ctrl.schemaMappingOptions"></select>
      </div>
      <span ng-if="ctrl.mapping.input.length > 0" class="gf-form-label">(</span>
    </div>

    <div style="margin-left: 20px;">
      <div class="gf-form" ng-repeat="i in ctrl.mapping.input">
        <span class="gf-form-label">{{i.Name}}</span>
        <input class="gf-form-input width-15" ng-model="ctrl.mapping.input[$index].Value" type="text" placeholder=""></input>
        <span ng-if="($index + 1) !== ctrl.mapping.input.length" class="gf-form-label">,</span>
      </div>
    </div>

    <div class="gf-form">
      <span ng-if="ctrl.mapping.input.length > 0" class="gf-form-label">)</span>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <span class="gf-form-label width-5">Name
        </div> </span>
        <input class="gf-form-input width-24" spellcheck="false" ng-model="ctrl.mapping.name"></input>
        <info-popover mode="right-absolute">
          The name that will be displayed in "from"-options list in the visual query editor.
        </info-popover>
      </div>
      
    </div>

    <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.addSchemaMapping()">Add mapping</a>
  </div>
  <hr />
</div>

<div class="gf-form-group" ng-if="ctrl.showMinVersionWarning()">
  <div class=" alert alert-error">
      This datasource requires Grafana 7.1.0 or greater. <a class="external-link" target="_blank" href="https://grafana.com/get">Download a new version of
      Grafana here.</a>
  </div>
</div>


<h3 class="page-heading">Tracking</h3>
<div class ="gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form">
      <gf-form-switch label="Forward username header to host" checked="ctrl.current.jsonData.enableUserTracking" label-class="width-13">
      </gf-form-switch>
      <info-popover mode="right-normal">
        With this feature enabled, Grafana will pass the logged in user's username in the <code>x-ms-user-id</code> header and in the <code>x-ms-client-request-id</code> header when sending requests to ADX. Can be useful when tracking needs to be done in ADX. 
      </info-popover>
    </div>
  </div>
</div> 
